﻿<!DOCTYPE html>
<html class="no-js" lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>My Account - Shoplook Multipurpose eCommerce Bootstrap5 Html Template</title>
    <meta name="description" content="description">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Favicon -->
    <link rel="shortcut icon" th:href="@{/assets/images/favicon.png}"/>
    <!-- Plugins CSS -->
    <link rel="stylesheet" th:href="@{/assets/css/plugins.css}">
    <!-- Main Style CSS -->
    <link rel="stylesheet" th:href="@{/assets/css/style.css}">
    <link rel="stylesheet" th:href="@{/assets/css/responsive.css}">

    <style>
        .order-item-pic {
            width: 60px;
            height: 60px;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body class="my-account">
<!--Pre-Loader-->
<div id="pre-loader" class="preloader">
    <div class="preloader-in h2">
        <span>S</span><span>H</span><span>O</span><span>P</span><span>L</span><span>O</span><span>O</span><span>K</span>
    </div>
</div>
<!--End Pre-Loader-->
<div class="page-wrapper">
    <!--引入片段-->
    <div th:replace="~{include_header::header}"></div>

    <div id="page-content">
        <!--Body Container-->
        <!--Page Header-->
        <div class="page-header" th:style="|background-image: url(@{/assets/images/page-header/page-banner1.jpg})|">
            <div class="page-title"><h1>My Account</h1></div>
            <!--Breadcrumbs-->
            <div class="breadcrumbs-wrapper">
                <div class="container">
                    <div class="breadcrumbs"><a href="/" title="Back to the home page"><i
                            class="an an-home icon-home"></i></a> <span aria-hidden="true"><i
                            class="an an-angle-right"></i></span> <span>My Account</span></div>
                </div>
            </div>
            <!--End Breadcrumbs-->
        </div>
        <!--End Page Header-->
        <div class="container">
            <div class="dashboard-upper-info">
                <div class="row align-items-center no-gutters">
                    <div class="col-xl-3 col-lg-3 col-md-12">
                        <div class="d-single-info">
                            <p class="user-name">Hello <span class="font-weight-600">yourmail@info</span></p>
                            <p>(not yourmail@info? <a class="font-weight-600" th:href="@{/}">Log Out</a>)</p>
                        </div>
                    </div>
                    <div class="col-xl-4 col-lg-4 col-md-12">
                        <div class="d-single-info">
                            <p>Need Assistance? Customer service at.</p>
                            <p>admin@yoursite.com.</p>
                        </div>
                    </div>
                    <div class="col-xl-3 col-lg-3 col-md-12">
                        <div class="d-single-info">
                            <p>E-mail them at </p>
                            <p>support@yoursite.com</p>
                        </div>
                    </div>
                    <div class="col-xl-2 col-lg-2 col-md-12">
                        <div class="d-single-info text-lg-center">
                            <a class="view-cart" th:href="@{/cart}"><i
                                    class="icon an an-lg an-shopping-basket"></i> View Cart</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row mb-5">
                <div class="col-xl-2 col-lg-2 col-md-12 md-margin-20px-bottom">
                    <!-- Nav tabs -->
                    <ul class="nav flex-column dashboard-list" role="tablist">
                        <li><a class="nav-link active" data-bs-toggle="tab" href="#dashboard">My Account</a></li>
                        <li><a class="nav-link" data-bs-toggle="tab" href="#orders">My Orders</a></li>
                        <li><a class="nav-link" data-bs-toggle="tab" href="#downloads">Downloads</a></li>
                        <li><a class="nav-link" data-bs-toggle="tab" href="#address">Addresses</a></li>
                        <li><a class="nav-link" data-bs-toggle="tab" href="#account-details">Account details</a></li>
                        <li><a class="nav-link" th:href="@{/login}">logout</a></li>
                    </ul>
                    <!-- End Nav tabs -->
                </div>

                <div class="col-xs-10 col-lg-10 col-md-12">
                    <!-- Tab panes -->
                    <div class="tab-content dashboard-content padding-30px-all md-padding-15px-all" style="">
                        <!-- Dashboard -->
                        <div id="dashboard" class="tab-pane fade active show">
                            <h3>My Account </h3>
                            <p>From your account dashboard. you can easily check &amp; view your
                                <a class="text-decoration-underline" href="#">recent orders</a>, manage your
                                <a class="text-decoration-underline" href="#">shipping and billing addresses</a> and
                                <a class="text-decoration-underline" href="#">edit your password and account
                                    details.</a>
                            </p>
                            <hr/>
                            <div class="row">
                                <div class="col-12 block-box block-dashboard-info mt-3">
                                    <div class="block-title mb-3"><h4 class="mb-0">Account Information</h4></div>
                                </div>
                                <div class="col-12 col-sm-6 col-md-6 mb-3">
                                    <div class="box box-information">
                                        <strong class="box-title">Contact Information</strong>
                                        <div class="box-content">
                                            <p>Veronica Costello</p>
                                            <p>roni_cost@example.com</p>
                                        </div>
                                        <div class="box-actions  mt-2">
                                            <a class="action edit" href="#"><i class="an an-lg an-edit"></i></a>
                                            <a href="#" class="action change-password">Change Password</a>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-12 col-sm-6 col-md-6 mb-3">
                                    <div class="box box-information">
                                        <strong class="box-title">Newsletters</strong>
                                        <div class="box-content">
                                            <p>You aren't subscribed to our newsletter.</p>
                                        </div>
                                        <div class="box-actions  mt-2">
                                            <a class="action edit" href="#"><i class="an an-lg an-edit"></i></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-12 block-box block-dashboard-info mt-3">
                                    <div class="block-title mb-3"><h4 class="mb-0">Address Book</h4> <a
                                            class="action edit" href="#">Manage Addresses</a></div>
                                </div>
                                <div class="col-12 col-sm-6 col-md-6 mb-3">
                                    <div class="box box-information">
                                        <strong class="box-title">Default Billing Address</strong>
                                        <div class="box-content">
                                            <p>Veronica Costello</p>
                                            <p>6146 Honey Bluff Parkway<br>
                                                Calder, Michigan, 49628-7978<br>
                                                United States<br>
                                            <p>T: (555) 229-3326</p>
                                        </div>
                                        <div class="box-actions mt-2">
                                            <a class="action edit" href="#"><b>Edit your billing address</b> <i
                                                    class="an an-lg an-arrow-right"></i></a>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-12 col-sm-6 col-md-6 mb-3">
                                    <div class="box box-information">
                                        <strong class="box-title">Default Shipping Address</strong>
                                        <div class="box-content">
                                            <p>Veronica Costello</p>
                                            <p>6146 Honey Bluff Parkway<br>
                                                Calder, Michigan, 49628-7978<br>
                                                United States<br>
                                            <p>T: (555) 229-3326</p>
                                        </div>
                                        <div class="box-actions mt-2">
                                            <a class="action edit" href="#"><b>Edit your shipping address</b> <i
                                                    class="an an-lg an-arrow-right"></i></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- End Dashboard -->

                        <!-- Orders -->
                        <div id="orders" class="product-order tab-pane fade">
                            <h3>My Orders</h3>
                            <div class="table-responsive">
                                <table class="table">
                                    <thead class="alt-font">
                                    <tr>
                                        <th>OrderNo</th>
                                        <th>Product Name</th>
                                        <th>Order Time</th>
                                        <th>Status</th>
                                        <th>Total</th>
                                        <th>Actions</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr th:each="order:${orders}" th:id="${order.id}">
                                        <td th:text="${order.orderNo}">#2321</td>
                                        <td th:text="${order.description ?: 'Order Description'}">32J4100 32 inches HD
                                            Ready LED TV
                                        </td>
                                        <td th:text="${order.createdTime}">March 04, 2018</td>
                                        <td th:text="${order.status}">Processing</td>
                                        <td th:text="|&yen;${order.totalPay}|">$165.00
                                        </td>
                                        <td>
                                            <a class="view btn btn--small btn-detail" href="javascript:void(0)">详情</a>
                                            <a th:if="${order.status=='已发货'}" class="btn btn--small btn-accept"
                                               href="javascript:void(0)">确认</a>
                                            <a th:if="${order.status=='未支付'}" class="btn btn--small"
                                               th:href="@{/prepare_checkout(orderId=${order.id})}">支付</a>

                                        </td>
                                        <td colspan="6" style="display: none">
                                            <div class="order-detail-info">
                                                <p><strong>订单号:</strong> [[${order.orderNo}]]</p>
                                                <p><strong>收货人:</strong> [[${order.receiverName}]]</p>
                                                <p><strong>收货电话:</strong> [[${order.receiverPhone}]]</p>
                                                <p><strong>收货地址:</strong> [[${order.receiverAddrDetail}]]</p>
                                                <p><strong>支付方式:</strong> [[${order.payType ?: '未设置'}]]</p>
                                                <p><strong>订单备注:</strong> [[${order.orderComment ?: '无'}]]</p>
                                            </div>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <!-- End Orders -->

                        <!-- Downloads -->
                        <div id="downloads" class="product-order tab-pane fade">
                            <h3>Downloads</h3>
                            <div class="table-responsive">
                                <table class="table">
                                    <thead>
                                    <tr>
                                        <th>Product</th>
                                        <th>Downloads remaining</th>
                                        <th>Expires</th>
                                        <th>Download</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr>
                                        <td>Canon CSG-QX10 Full Shot Lens</td>
                                        <td>July 22, 2018</td>
                                        <td>never</td>
                                        <td><a class="view btn btn--small" href="#">Click Here To Download Your File</a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>Canon CSG-QX10 Full Shot Lens</td>
                                        <td>Dec 17, 2018</td>
                                        <td>never</td>
                                        <td><a class="view btn btn--small" href="#">Click Here To Download Your File</a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>Alpha ILCE-6000L 24.3 MP Mirrorless</td>
                                        <td>Dec 17, 2018</td>
                                        <td>never</td>
                                        <td><a class="view btn btn--small" href="#">Click Here To Download Your File</a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>Fully Automatic Washing Machine</td>
                                        <td>Dec 17, 2018</td>
                                        <td>never</td>
                                        <td><a class="view btn btn--small" href="#">Click Here To Download Your File</a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>Sueded Cotton Pant in Khaki</td>
                                        <td>Dec 17, 2018</td>
                                        <td>never</td>
                                        <td><a class="view btn btn--small" href="#">Click Here To Download Your File</a>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <!-- End Downloads -->

                        <!-- Address -->
                        <div id="address" class="address tab-pane">
                            <p class="xs-fon-13 mb-4">The following addresses will be used on the checkout page by
                                default.</p>
                            <div class="row">
                                <div class="col-12 col-sm-6 col-md-6 mb-3">
                                    <div class="box box-information">
                                        <strong class="box-title">Billing Address</strong>
                                        <div class="box-content">
                                            <p>Veronica Costello</p>
                                            <p>6146 Honey Bluff Parkway<br>
                                                Calder, Michigan, 49628-7978<br>
                                                United States<br>
                                            <p>T: (555) 229-3326</p>
                                        </div>
                                        <div class="box-actions mt-2">
                                            <a class="action edit" href="#"><b>Edit your billing address</b> <i
                                                    class="an an-lg an-arrow-right"></i></a>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-12 col-sm-6 col-md-6 mb-3">
                                    <div class="box box-information">
                                        <strong class="box-title">Shipping Address</strong>
                                        <div class="box-content">
                                            <p>Veronica Costello</p>
                                            <p>6146 Honey Bluff Parkway<br>
                                                Calder, Michigan, 49628-7978<br>
                                                United States<br>
                                            <p>T: (555) 229-3326</p>
                                        </div>
                                        <div class="box-actions mt-2">
                                            <a class="action edit" href="#"><b>Edit your shipping address</b> <i
                                                    class="an an-lg an-arrow-right"></i></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- End Address -->

                        <!-- Account Details -->
                        <div id="account-details" class="tab-pane fade">
                            <h3>Account details </h3>
                            <div class="account-login-form bg-light-gray padding-20px-all">
                                <form>
                                    <fieldset>
                                        <p>Already have an account? <a href="login.html"> Log in instead!</a></p>

                                        <div class="row">
                                            <div class="form-group mb-3 mt-3">
                                                <div class="form-group margin-15px-top col-md-12 col-lg-12 col-xl-12">
                                                    <label class="control-label padding-10px-right"><strong>Title</strong></label>
                                                    <label class="radio-inline">
                                                        <input name="Mr" value="1" checked="checked" type="radio"
                                                               class="padding-10px-right"> Mr. &nbsp;
                                                    </label>
                                                    <label class="radio-inline">
                                                        <input name="Mrs" value="0" type="radio"
                                                               class="padding-10px-right"> Mrs.
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="form-group col-md-6 col-lg-6 col-xl-6 required mb-3">
                                                <label for="input-firstname">First Name <span
                                                        class="required-f">*</span></label>
                                                <input name="firstname" value="" id="input-firstname" type="text">
                                            </div>
                                            <div class="form-group col-md-6 col-lg-6 col-xl-6 required mb-3">
                                                <label for="input-lastname">Last Name <span class="required-f">*</span></label>
                                                <input name="lastname" value="" id="input-lastname" type="text">
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="form-group col-md-6 col-lg-6 col-xl-6 required mb-3">
                                                <label for="input-email">E-Mail <span
                                                        class="required-f">*</span></label>
                                                <input name="email" value="" id="input-email" type="email">
                                            </div>
                                            <div class="form-group col-md-6 col-lg-6 col-xl-6 required mb-3">
                                                <label for="input-password">Password <span
                                                        class="required-f">*</span></label>
                                                <input name="password" value="" id="input-password" type="password">
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="form-group col-md-6 col-lg-6 col-xl-6 required mb-3">
                                                <label for="input-telephone">Telephone <span class="required-f">*</span></label>
                                                <input name="telephone" value="" id="input-telephone" type="tel">
                                            </div>
                                            <div class="form-group col-md-6 col-lg-6 col-xl-6 required mb-3">
                                                <label>Birthdate <span class="required-f">*</span></label>
                                                <input name="birthdate" min="1000-01-01" type="date">
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="col-md-12 col-lg-12 col-xl-12 required">
                                                <div>
                                                    <label class="form-check-label">
                                                        <input type="checkbox" class="form-check-box" value=""> Receive
                                                        offers from our partners
                                                    </label>
                                                </div>
                                                <div>
                                                    <label class="form-check-label">
                                                        <input type="checkbox" class="form-check-box" value=""> Sign up
                                                        for our newsletter
                                                    </label>
                                                    <p class="mt-3">You may unsubscribe at any moment. For that purpose,
                                                        please find our contact info in the legal notice.</p><br>
                                                </div>
                                            </div>
                                        </div>
                                    </fieldset>

                                    <button type="submit" class="btn margin-15px-top btn-primary">Save</button>
                                </form>

                            </div>

                        </div>
                        <!-- End Account Details -->
                    </div>
                    <!-- End Tab panes -->
                </div>
            </div>
        </div><!--End Body Container-->
    </div><!--End Page Wrapper-->

    <!--Footer-->
    <div class="footer footer-1">
        <div class="footer-top clearfix">
            <div class="container">
                <div class="row">
                    <div class="col-12 col-sm-12 col-md-4 col-lg-3 about-us-col">
                        <img src="assets/images/logo-white.png" alt="ShopLook"/>
                        <p>55 Gallaxy Enque, 2568 steet,<br>23568 NY</p>
                        <p><b>Phone</b>: (440) 000 000 0000</p>
                        <p><b>Email</b>: <a href="mailto:sales@yousite.com">sales@yousite.com</a></p>
                        <ul class="list--inline social-icons">
                            <li><a href="#"><i class="icon an an-facebook-f"></i></a></li>
                            <li><a href="#"><i class="icon an an-twitter"></i></a></li>
                            <li><a href="#"><i class="icon an an-pinterest-p"></i></a></li>
                            <li><a href="#"><i class="icon an an-instagram"></i></a></li>
                            <li><a href="#"><i class="icon an an-youtube"></i></a></li>
                        </ul>
                    </div>
                    <div class="col-12 col-sm-12 col-md-4 col-lg-3 footer-links">
                        <h4 class="h4">Quick Shop</h4>
                        <ul>
                            <li><a href="#">Home Appliances</a></li>
                            <li><a href="#">Phones &amp; Tablet</a></li>
                            <li><a href="#">Audio &amp; Video</a></li>
                            <li><a href="#">Digital Cameras</a></li>
                            <li><a href="#">Accessories</a></li>
                            <li><a href="#">Computer &amp; Laptop</a></li>
                            <li><a href="#">Game &amp; Video</a></li>
                        </ul>
                    </div>
                    <div class="col-12 col-sm-12 col-md-4 col-lg-3 footer-links">
                        <h4 class="h4">Informations</h4>
                        <ul>
                            <li><a th:href="@{/login}">Login</a></li>
                            <li><a th:href="@{/my-account}">My Account</a></li>
                            <li><a th:href="@{/cart}">View Cart</a></li>
                            <li><a href="#">Privacy policy</a></li>
                            <li><a href="#">Shipping &amp; Returns</a></li>
                            <li><a href="#">Terms &amp; condition</a></li>
                            <li><a href="#">404 Page</a></li>
                        </ul>
                    </div>
                    <div class="col-12 col-sm-12 col-md-4 col-lg-3 footer-links">
                        <h4 class="h4">Customer Services</h4>
                        <ul>
                            <li><a href="blog-left-sidebar.html">Blog</a></li>
                            <li><a href="aboutus-style1.html">About us</a></li>
                            <li><a href="faqs-style1.html">FAQ's</a></li>
                            <li><a href="contact-style1.html">Contact Us</a></li>
                            <li><a href="#">Orders and Returns</a></li>
                            <li><a href="#">Track My Order</a></li>
                            <li><a href="#">Support Center</a></li>
                        </ul>
                    </div>
                    <div class="col-12 col-sm-12 col-md-4 col-lg-3 newsletter-col">
                        <div class="display-table">
                            <div class="display-table-cell footer-newsletter">
                                <form action="#" method="post">
                                    <label class="h4">Sign Up To Our Newsletter</label>
                                    <p>Enter your email to receive daily news and get 20% off coupon for all items.</p>
                                    <div class="input-group">
                                        <input type="email" class="input-group__field newsletter-input" name="EMAIL"
                                               value="" placeholder="Email Your address" required>
                                        <span class="input-group__btn">
                                                    <button type="submit" class="btn btn-secondary newsletter__submit"
                                                            name="commit" id="Subscribe"><span
                                                            class="newsletter__submit-text--large">Subscribe</span></button>
                                                </span>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer-bottom clearfix">
            <div class="container">
                <ul class="payment-icons list--inline">
                    <li><i class="an an-cc-visa" aria-hidden="true"></i></li>
                    <li><i class="an an-cc-mastercard" aria-hidden="true"></i></li>
                    <li><i class="an an-cc-amex" aria-hidden="true"></i></li>
                    <li><i class="an an-cc-paypal" aria-hidden="true"></i></li>
                    <li><i class="an an-cc-discover" aria-hidden="true"></i></li>
                    <li><i class="an an-cc-stripe" aria-hidden="true"></i></li>
                    <li><i class="an an-cc-jcb" aria-hidden="true"></i></li>
                </ul>
                <div class="copytext">
                    &copy; 2022 ShopLook. All Rights By <a href="http://www.bootstrapMB.com">bootstrapMB</a>.
                </div>
            </div>
        </div>
    </div>
    <!--End Footer-->

    <!--Scoll Top-->
    <span id="site-scroll"><i class="icon an an-arrow-up"></i></span>
    <!--End Scoll Top-->

    <!--MiniCart Drawer-->
    <div class="minicart-right-drawer modal right fade" id="minicart-drawer">
        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
            <div class="modal-content">
                <div id="cart-drawer" class="block block-cart">
                    <a href="javascript:void(0);" class="close-cart" data-bs-dismiss="modal" aria-label="Close"><i
                            class="an an-times"></i></a>
                    <h4>Your cart (3 Items)</h4>
                    <div class="minicart-content">
                        <ul class="clearfix">
                            <li class="item clearfix">
                                <a class="product-image" href="#">
                                    <img src="assets/images/product-images/cart-page-img1.jpg"
                                         data-src="assets/images/product-images/cart-page-img1.jpg" alt="" title="">
                                </a>
                                <div class="product-details">
                                    <a href="#" class="remove"><i class="an an-times" aria-hidden="true"></i></a>
                                    <a href="#" class="edit-i remove"><i class="icon an an-edit" aria-hidden="true"></i></a>
                                    <a class="product-title" href="cart-style1.html">Acer NX.MVMSI.035 Intel Core i3
                                        15.6 inches Laptop</a>
                                    <div class="variant-cart">Black / XL</div>
                                    <div class="wrapQtyBtn">
                                        <div class="qtyField">
                                            <a class="qtyBtn minus" href="javascript:void(0);"><i class="an an-minus"
                                                                                                  aria-hidden="true"></i></a>
                                            <input type="text" name="quantity" value="1" class="qty">
                                            <a class="qtyBtn plus" href="javascript:void(0);"><i class="an an-plus"
                                                                                                 aria-hidden="true"></i></a>
                                        </div>
                                    </div>
                                    <div class="priceRow">
                                        <div class="product-price">
                                            <span class="money">$59.00</span>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li class="item clearfix">
                                <a class="product-image" href="#">
                                    <img src="assets/images/product-images/cart-page-img2.jpg"
                                         data-src="assets/images/product-images/cart-page-img2.jpg" alt="" title="">
                                </a>
                                <div class="product-details">
                                    <a href="#" class="remove"><i class="an an-times" aria-hidden="true"></i></a>
                                    <a href="#" class="edit-i remove"><i class="icon an an-edit" aria-hidden="true"></i></a>
                                    <a class="product-title" href="cart-style1.html">Canon CSG-QX10 Full Shot Lens</a>
                                    <div class="variant-cart">Red / S</div>
                                    <div class="wrapQtyBtn">
                                        <div class="qtyField">
                                            <a class="qtyBtn minus" href="javascript:void(0);"><i class="an an-minus"
                                                                                                  aria-hidden="true"></i></a>
                                            <input type="text" name="quantity" value="1" class="qty">
                                            <a class="qtyBtn plus" href="javascript:void(0);"><i class="an an-plus"
                                                                                                 aria-hidden="true"></i></a>
                                        </div>
                                    </div>
                                    <div class="priceRow">
                                        <div class="product-price">
                                            <span class="money">$89.00</span>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li class="item clearfix">
                                <a class="product-image" href="#">
                                    <img src="assets/images/product-images/elt-p-18-1.jpg"
                                         data-src="assets/images/product-images/elt-p-18-1.jpg" alt="" title="">
                                </a>
                                <div class="product-details">
                                    <a href="#" class="remove"><i class="an an-times" aria-hidden="true"></i></a>
                                    <a href="#" class="edit-i remove"><i class="icon an an-edit" aria-hidden="true"></i></a>
                                    <a class="product-title" href="cart-style1.html">Fully Automatic Washing Machine</a>
                                    <div class="wrapQtyBtn">
                                        <div class="qtyField">
                                            <a class="qtyBtn minus" href="javascript:void(0);"><i class="an an-minus"
                                                                                                  aria-hidden="true"></i></a>
                                            <input type="text" name="quantity" value="1" class="qty">
                                            <a class="qtyBtn plus" href="javascript:void(0);"><i class="an an-plus"
                                                                                                 aria-hidden="true"></i></a>
                                        </div>
                                    </div>
                                    <div class="priceRow">
                                        <div class="product-price">
                                            <span class="money">$1189.00</span>
                                        </div>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="minicart-bottom">
                        <div class="subtotal list">
                            <span>Shipping:</span>
                            <span class="product-price">$10.00</span>
                        </div>
                        <div class="subtotal list">
                            <span>Tax:</span>
                            <span class="product-price">$05.00</span>
                        </div>
                        <div class="subtotal">
                            <span>Total:</span>
                            <span class="product-price">$93.13</span>
                        </div>
                        <div class="row mt-3 mb-3">
                            <div class="col-12 col-sm-12 col-md-6 col-lg-6 pr-0">
                                <a href="checkout-style2.html" class="btn proceed-to-checkout">Go to Checkout</a>
                            </div>
                            <div class="col-12 col-sm-12 col-md-6 col-lg-6">
                                <a href="cart-style1.html" class="btn btn-secondary cart-btn">View Cart</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--End MiniCart Drawer-->

    <!-- Including Jquery -->
    <script th:src="@{/assets/js/vendor/jquery-3.3.1.min.js}"></script>
    <script th:src="@{/assets/js/vendor/js.cookie.js}"></script>
    <!--Including Javascript-->
    <script th:src="@{/assets/js/plugins.js}"></script>
    <script th:src="@{/assets/js/main.js}"></script>

    <script th:inline="javascript">
        //上下文路径
        let ctx = /*[[@{/}]]*/"";
        if (ctx.endsWith("/")) {
            ctx = ctx.substring(0, ctx.length - 1);
        }

        //详情按钮
        $(".btn-detail").click(function () {
            let $tr = $(this).closest("tr");
            let $nextTr = $tr.next();

            if ($nextTr.is(".detail-tr")) {
                if ($nextTr.is(":hidden")) {
                    $nextTr.show();
                } else {
                    $nextTr.hide();
                }
            } else {
                let $detailTr = $("<tr>").addClass("detail-tr");
                let $detailTd = $tr.children("td:last");//详情td
                $detailTr.append($detailTd);
                $detailTd.show();
                $tr.after($detailTr);
            }
        });

        //确认按钮
        $(".btn-accept").click(function () {
            let $tr = $(this).closest("tr");
            let orderId = $tr.attr("id");//订单主键
            let url = "/order/accept";//确认收货
            $.ajax({
                url,
                method: "put",
                data: {
                    orderId
                },
                success(resp) {
                    if (resp.success) {
                        layer.msg("确认收货操作成功");
                        location.reload();
                    } else {
                        layer.msg(resp.msg || "确认收货操作失败");
                    }
                }
            });
        });

    </script>

</div>
</body>
</html>
